<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%><%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@include file="/WEB-INF/view/common/css.jsp"%>
  <meta name="keywords" content='<c:out value="${article.title}"></c:out>' />
  <meta name="description" content="${article.description} " />
<script src="<en:path/>/resources/layer/extend/layer.ext.js?version=1.0"></script>
<title>ENZO—${article.navname }—${article.title }</title>
<style type="text/css">
body {
	padding-bottom: 70px;
}

.breadcrumb {
	margin: 10px auto;
	background-color: #f1f4f7;
}

article {
	border: 1px #3e3e3e solid;
	padding: 10px
}

article header p {
	text-align: right;
	margin-right: 20px;
}

article .img {
	text-align: center;
}

.form {
	text-align: center;
	margin: 20px;
}
</style>
</head>
<body>
	<%@include file="/WEB-INF/view/common/nav.jsp"%>

	<div class="container">
		<div style="height: 50px;"></div>
		<div class="row">
			<div class="col-xs-12">
				<ol class="breadcrumb">
					<li>现在的位置</li>
					<li class="active"><a href="#">${article.navname }</a></li>
				</ol>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-8">
				<article>
					<header>
						<div class="page-header"><h3>${article.title }</h3></div>
						<p>
							发表日期：
							<time pubdate="pubdate">${article.createtime }</time>
							<span>${article.countview }</span>
						</p>
					</header>
					<section>${article.content }</section>
				</article>
			</div>
			<%@include file="common/left.jsp" %>
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			$("article img")
					.each(
							function(index) {
								$(this).attr("layer-src", $(this).attr("src"));
								$(this).attr("layer-pid", index);
								var img = $(this)[0];
								var art = $(this).parents("section").width();
								AutoResizeImage(art, 400, img);
								var div = "<div class='img'><div class='img-thumbnail'></div></div>";
								//console.info($div)
								$(this).wrap(div);
							});

			layer.photos({
				photos : '.img-thumbnail'
			});
		});

		function AutoResizeImage(maxWidth, maxHeight, objImg) {
			var img = new Image();
			img.src = objImg.src;
			var hRatio;
			var wRatio;
			var Ratio = 1;
			var w = img.width;
			var h = img.height;
			wRatio = maxWidth / w;
			hRatio = maxHeight / h;
			if (maxWidth == 0 && maxHeight == 0) {
				Ratio = 1;
			} else if (maxWidth == 0) {//
				if (hRatio < 1)
					Ratio = hRatio;
			} else if (maxHeight == 0) {
				if (wRatio < 1)
					Ratio = wRatio;
			} else if (wRatio < 1 || hRatio < 1) {
				Ratio = (wRatio <= hRatio ? wRatio : hRatio);
			}
			if (Ratio < 1) {
				w = w * Ratio;
				h = h * Ratio;
			}
			objImg.height = h;
			objImg.width = w;
		}
	</script>
</body>
</html>